import {createRouter,createWebHistory} from 'vue-router'
import {nextTick} from 'vue'
import Layout from '@/views/Layout/index.vue'
import Login from '@/views/Login/index.vue'
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'
import ChildrenCategoryVue from '@/views/SubCategory/ChildrenCategory.vue'
import Goods from '@/views/Goods/index.vue'
import Cart from '@/views/Layout/components/Cart.vue'
import CheckOut from '@/views/Checkout/index.vue'
import Order from '@/views/order/index.vue'
import Pay from '@/views/Pay/index.vue'
import Member from '@/views/Member/index.vue'
import UserInfoVue from '@/views/Member/Components/UserInfo.vue'
import UserOrderVue from '@/views/Member/Components/UserOrder.vue'
export const router = createRouter({
    history:createWebHistory(import.meta.env.BASE_URL),
    routes:[
        {
            path:'',
            component:Layout,
            children:[
                {path:'',component: Home},
                {path:'/category/:id',component:Category},
                {path:'/category/sub/:id',component:ChildrenCategoryVue},
                {path:'/goods/:id',component:Goods},
                {path:'/cart',component:Cart},
                {path:'/checkOut',component:CheckOut},
                {path:'/order',component:Order},
                {path:'/paycallback',component:Pay},
                {
                  path:'/member',
                  component:Member,
                  children:[
                    {path:'',redirect:'/member/userInfo'},
                    {path:'userInfo',component:UserInfoVue},
                    {path:'userOrder',component:UserOrderVue}
                  ]
                }
            ]
        },
        {path:'/login',component:Login}
    ],
    scrollBehavior(to, from, savedPosition) {
        // 如果 savedPosition 存在，则返回 savedPosition，即用户通过浏览器的前进/后退按钮导航时的位置
        if (savedPosition) {
          return savedPosition;
        } else {
          // 返回一个Promise来异步处理滚动行为
          return new Promise((resolve, reject) => {
            // 等待Vue的下一个tick，确保滚动的DOM已经渲染完毕
            nextTick(() => {
              resolve({ top: 0 });
            });
          });
        }
      },
})